21 Agustus 2025Bahasa Indonesia

Pembahasan mendalam tentang Decorator JavaScript, menjelajahi sintaksis, kasus penggunaan untuk pemrograman metadata, praktik terbaik, dan dampaknya pada pemeliharaan kode. Termasuk contoh praktis dan pertimbangan masa depan.

Decorator JavaScript: Menerapkan Pemrograman Metadata

Decorator JavaScript adalah fitur canggih yang memungkinkan Anda menambahkan metadata dan memodifikasi perilaku kelas, metode, properti, dan parameter secara deklaratif dan dapat digunakan kembali. Fitur ini merupakan proposal tahap 3 dalam proses standar ECMAScript dan banyak digunakan dengan TypeScript, yang memiliki implementasi sendiri (sedikit berbeda). Artikel ini akan memberikan gambaran komprehensif tentang Decorator JavaScript, berfokus pada perannya dalam pemrograman metadata dan mengilustrasikan penggunaannya dengan contoh-contoh praktis.

Apa itu Decorator JavaScript?

Decorator adalah pola desain yang meningkatkan atau memodifikasi fungsionalitas suatu objek tanpa mengubah strukturnya. Dalam JavaScript, decorator adalah jenis deklarasi khusus yang dapat dilampirkan ke kelas, metode, accessor, properti, atau parameter. Mereka menggunakan simbol @ yang diikuti oleh fungsi yang akan dieksekusi saat elemen yang didekorasi didefinisikan.

Anggap decorator sebagai fungsi yang menerima elemen yang didekorasi sebagai input dan mengembalikan versi yang dimodifikasi dari elemen tersebut, atau melakukan beberapa efek samping berdasarkan itu. Ini menyediakan cara yang bersih dan elegan untuk menambahkan fungsionalitas tanpa mengubah kelas atau fungsi asli secara langsung.

Konsep Kunci:

Fungsi Decorator: Fungsi yang diawali dengan simbol @. Fungsi ini menerima informasi tentang elemen yang didekorasi dan dapat memodifikasinya.
Elemen yang Didekorasi: Kelas, metode, accessor, properti, atau parameter yang didekorasi.
Metadata: Data yang mendeskripsikan data. Decorator sering digunakan untuk mengasosiasikan metadata dengan elemen kode.

Sintaksis dan Struktur

Sintaksis dasar dari sebuah decorator adalah sebagai berikut:

@decorator
class MyClass {
  // Anggota kelas
}

Di sini, @decorator adalah fungsi decorator dan MyClass adalah kelas yang didekorasi. Fungsi decorator dipanggil ketika kelas didefinisikan dan dapat mengakses serta memodifikasi definisi kelas.

Decorator juga dapat menerima argumen, yang diteruskan ke fungsi decorator itu sendiri:

@loggable(true, "Pesan Kustom")
class MyClass {
  // Anggota kelas
}

Dalam kasus ini, loggable adalah fungsi factory decorator, yang menerima argumen dan mengembalikan fungsi decorator yang sebenarnya. Ini memungkinkan decorator yang lebih fleksibel dan dapat dikonfigurasi.

Jenis-jenis Decorator

Ada berbagai jenis decorator, tergantung pada apa yang mereka dekorasi:

Decorator Kelas: Diterapkan pada kelas.
Decorator Metode: Diterapkan pada metode di dalam kelas.
Decorator Accessor: Diterapkan pada accessor getter dan setter.
Decorator Properti: Diterapkan pada properti kelas.
Decorator Parameter: Diterapkan pada parameter suatu metode.

Decorator Kelas

Decorator kelas digunakan untuk memodifikasi atau meningkatkan perilaku sebuah kelas. Mereka menerima konstruktor kelas sebagai argumen dan dapat mengembalikan konstruktor baru untuk menggantikan yang asli. Ini memungkinkan Anda untuk menambahkan fungsionalitas seperti logging, injeksi dependensi, atau manajemen state.

Contoh:

function loggable(constructor: Function) {
  console.log("Kelas " + constructor.name + " telah dibuat.");
}

@loggable
class User {
  name: string;

  constructor(name: string) {
    this.name = name;
  }
}

const user = new User("Alice"); // Menghasilkan: Kelas User telah dibuat.

Dalam contoh ini, decorator loggable mencatat pesan ke konsol setiap kali instance baru dari kelas User dibuat. Ini bisa berguna untuk debugging atau pemantauan.

Decorator Metode

Decorator metode digunakan untuk memodifikasi perilaku sebuah metode di dalam kelas. Mereka menerima argumen berikut:

target: Prototipe dari kelas.
propertyKey: Nama metode.
descriptor: Deskriptor properti untuk metode tersebut.

Deskriptor memungkinkan Anda untuk mengakses dan memodifikasi perilaku metode, seperti membungkusnya dengan logika tambahan atau mendefinisikannya kembali sepenuhnya.

Contoh:

function logMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Memanggil metode ${propertyKey} dengan argumen: ${args}`);
    const result = originalMethod.apply(this, args);
    console.log(`Metode ${propertyKey} mengembalikan: ${result}`);
    return result;
  };
  return descriptor;
}

class Calculator {
  @logMethod
  add(a: number, b: number): number {
    return a + b;
  }
}

const calculator = new Calculator();
const sum = calculator.add(5, 3); // Menghasilkan log untuk pemanggilan metode dan nilai kembali

Dalam contoh ini, decorator logMethod mencatat argumen dan nilai kembali metode. Ini bisa berguna untuk debugging dan pemantauan kinerja.

Decorator Accessor

Decorator accessor mirip dengan decorator metode tetapi diterapkan pada accessor getter dan setter. Mereka menerima argumen yang sama dengan decorator metode dan memungkinkan Anda untuk memodifikasi perilaku accessor.

Contoh:

function validate(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalSet = descriptor.set;

  descriptor.set = function (value: any) {
    if (value < 0) {
      throw new Error("Nilai harus non-negatif.");
    }
    originalSet.call(this, value);
  };
}

class Temperature {
  private _celsius: number;

  constructor(celsius: number) {
    this._celsius = celsius;
  }

  @validate
  set celsius(value: number) {
    this._celsius = value;
  }

  get celsius(): number {
    return this._celsius;
  }
}

const temperature = new Temperature(25);
temperature.celsius = 30; // Valid
// temperature.celsius = -10; // Melemparkan error

Dalam contoh ini, decorator validate memastikan bahwa nilai suhu tidak negatif. Ini bisa berguna untuk menegakkan integritas data.

Decorator Properti

Decorator properti digunakan untuk memodifikasi perilaku properti kelas. Mereka menerima argumen berikut:

target: Prototipe dari kelas (untuk properti instance) atau konstruktor kelas (untuk properti statis).
propertyKey: Nama properti.

Decorator properti dapat digunakan untuk mendefinisikan metadata atau memodifikasi deskriptor properti.

Contoh:

function readonly(target: any, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    writable: false,
  });
}

class Configuration {
  @readonly
  apiUrl: string = "https://api.example.com";
}

const config = new Configuration();
// config.apiUrl = "https://newapi.example.com"; // Melemparkan error dalam strict mode

Dalam contoh ini, decorator readonly membuat properti apiUrl menjadi hanya-baca, mencegahnya diubah setelah inisialisasi. Ini bisa berguna untuk mendefinisikan nilai konfigurasi yang tidak dapat diubah.

Decorator Parameter

Decorator parameter digunakan untuk memodifikasi perilaku parameter metode. Mereka menerima argumen berikut:

target: Prototipe dari kelas (untuk metode instance) atau konstruktor kelas (untuk metode statis).
propertyKey: Nama metode.
parameterIndex: Indeks parameter dalam daftar parameter metode.

Decorator parameter lebih jarang digunakan daripada jenis decorator lainnya, tetapi bisa berguna untuk memvalidasi parameter input atau menyuntikkan dependensi.

Contoh:

function required(target: any, propertyKey: string, parameterIndex: number) {
  const existingRequiredParameters: number[] = Reflect.getOwnMetadata(propertyKey, target, "required") || [];
  existingRequiredParameters.push(parameterIndex);
  Reflect.defineMetadata(propertyKey, existingRequiredParameters, target, "required");
}

function validateMethod(target: any, propertyName: string, descriptor: PropertyDescriptor) {
  let method = descriptor.value!;

  descriptor.value = function () {
    let requiredParameters: number[] = Reflect.getOwnMetadata(propertyName, target, "required");
    if (requiredParameters) {
      for (let parameterIndex of requiredParameters) {
        if (arguments[parameterIndex] === null || arguments[parameterIndex] === undefined) {
          throw new Error(`Argumen yang diperlukan pada indeks ${parameterIndex} hilang`);
        }
      }
    }

    return method.apply(this, arguments);
  };
}


class ArticleService {
  create(
    @required title: string,
    @required content: string
  ): void {
    console.log(`Membuat artikel dengan judul: ${title} dan konten: ${content}`);
  }
}

const service = new ArticleService();
// service.create("Artikel Saya", null); // Melemparkan error
service.create("Artikel Saya", "Konten Artikel"); // Valid

Dalam contoh ini, decorator required menandai parameter sebagai wajib, dan decorator validateMethod memastikan bahwa parameter ini tidak null atau undefined. Ini bisa berguna untuk menegakkan validasi input metode.

Pemrograman Metadata dengan Decorator

Salah satu kasus penggunaan decorator yang paling kuat adalah pemrograman metadata. Metadata adalah data tentang data. Dalam konteks pemrograman, ini adalah data yang mendeskripsikan struktur, perilaku, dan tujuan kode Anda. Decorator menyediakan cara yang bersih dan deklaratif untuk mengasosiasikan metadata dengan kelas, metode, properti, dan parameter.

API Reflect Metadata

API Reflect Metadata adalah API standar yang memungkinkan Anda menyimpan dan mengambil metadata yang terkait dengan objek. Ini menyediakan fungsi-fungsi berikut:

Reflect.defineMetadata(key, value, target, propertyKey): Mendefinisikan metadata untuk properti tertentu dari suatu objek.
Reflect.getMetadata(key, target, propertyKey): Mengambil metadata untuk properti tertentu dari suatu objek.
Reflect.hasMetadata(key, target, propertyKey): Memeriksa apakah metadata ada untuk properti tertentu dari suatu objek.
Reflect.deleteMetadata(key, target, propertyKey): Menghapus metadata untuk properti tertentu dari suatu objek.

Anda dapat menggunakan fungsi-fungsi ini bersama dengan decorator untuk mengasosiasikan metadata dengan elemen kode Anda.

Contoh: Mendefinisikan dan Mengambil Metadata

import 'reflect-metadata';

const logKey = "log";

function log(message: string) {
  return function (target: any, key: string, descriptor: PropertyDescriptor) {
    Reflect.defineMetadata(logKey, message, target, key);

    const originalMethod = descriptor.value;
    descriptor.value = function (...args: any[]) {
      console.log(Reflect.getMetadata(logKey, target, key));
      const result = originalMethod.apply(this, args);
      return result;
    }

    return descriptor;
  }
}

class Example {
  @log("Menjalankan metode")
  myMethod(arg: string): string {
    return `Metode dipanggil dengan ${arg}`;
  }
}

const example = new Example();
example.myMethod("Hello"); // Menghasilkan: Menjalankan metode, Metode dipanggil dengan Hello

Dalam contoh ini, decorator log menggunakan API Reflect Metadata untuk mengasosiasikan pesan log dengan metode myMethod. Ketika metode dipanggil, decorator mengambil dan mencatat pesan ke konsol.

Kasus Penggunaan untuk Pemrograman Metadata

Pemrograman metadata dengan decorator memiliki banyak aplikasi praktis, termasuk:

Serialisasi dan Deserialisasi: Anotasi properti dengan metadata untuk mengontrol bagaimana mereka diserialisasi atau deserialisasi ke/dari JSON atau format lain. Ini bisa berguna saat berurusan dengan data dari API eksternal atau database, terutama dalam sistem terdistribusi yang memerlukan transformasi data di berbagai platform (misalnya, mengonversi format tanggal antara standar regional yang berbeda). Bayangkan sebuah platform e-commerce yang berurusan dengan alamat pengiriman internasional, di mana Anda mungkin menggunakan metadata untuk menentukan format alamat yang benar dan aturan validasi untuk setiap negara.
Injeksi Ketergantungan: Gunakan metadata untuk mengidentifikasi dependensi yang perlu disuntikkan ke dalam kelas. Ini menyederhanakan manajemen dependensi dan mempromosikan loose coupling. Pertimbangkan arsitektur microservices di mana layanan saling bergantung. Decorator dan metadata dapat memfasilitasi injeksi dinamis klien layanan berdasarkan konfigurasi, memungkinkan penskalaan dan toleransi kesalahan yang lebih mudah.
Validasi: Definisikan aturan validasi sebagai metadata dan gunakan decorator untuk memvalidasi data secara otomatis. Ini memastikan integritas data dan mengurangi kode boilerplate. Misalnya, aplikasi keuangan global perlu mematuhi berbagai peraturan keuangan regional. Metadata dapat mendefinisikan aturan validasi untuk format mata uang, perhitungan pajak, dan batas transaksi berdasarkan lokasi pengguna, memastikan kepatuhan terhadap hukum setempat.
Perutean dan Middleware: Gunakan metadata untuk mendefinisikan rute dan middleware untuk aplikasi web. Ini menyederhanakan konfigurasi aplikasi Anda dan membuatnya lebih mudah dipelihara. Jaringan pengiriman konten (CDN) yang didistribusikan secara global dapat menggunakan metadata untuk mendefinisikan kebijakan caching dan aturan perutean berdasarkan jenis konten dan lokasi pengguna, mengoptimalkan kinerja dan mengurangi latensi bagi pengguna di seluruh dunia.
Otorisasi dan Otentikasi: Asosiasikan peran, izin, dan persyaratan otentikasi dengan metode dan kelas, memfasilitasi kebijakan keamanan deklaratif. Bayangkan sebuah perusahaan multinasional dengan karyawan di berbagai departemen dan lokasi. Decorator dapat mendefinisikan aturan kontrol akses berdasarkan peran, departemen, dan lokasi pengguna, memastikan bahwa hanya personel yang berwenang yang dapat mengakses data dan fungsionalitas sensitif.

Praktik Terbaik

Saat menggunakan Decorator JavaScript, pertimbangkan praktik terbaik berikut:

Jaga Decorator Tetap Sederhana: Decorator harus fokus dan melakukan satu tugas yang terdefinisi dengan baik. Hindari logika kompleks di dalam decorator untuk menjaga keterbacaan dan kemudahan pemeliharaan.
Gunakan Factory Decorator: Gunakan factory decorator untuk memungkinkan decorator yang dapat dikonfigurasi. Ini membuat decorator Anda lebih fleksibel dan dapat digunakan kembali.
Hindari Efek Samping: Decorator harus fokus utama pada modifikasi elemen yang didekorasi atau mengasosiasikan metadata dengannya. Hindari melakukan efek samping yang kompleks di dalam decorator yang dapat membuat kode Anda lebih sulit dipahami dan di-debug.
Gunakan TypeScript: TypeScript memberikan dukungan yang sangat baik untuk decorator, termasuk pemeriksaan tipe dan IntelliSense. Menggunakan TypeScript dapat membantu Anda menangkap kesalahan lebih awal dan meningkatkan pengalaman pengembangan Anda.
Dokumentasikan Decorator Anda: Dokumentasikan decorator Anda dengan jelas untuk menjelaskan tujuan dan cara penggunaannya. Ini memudahkan pengembang lain untuk memahami dan menggunakan decorator Anda dengan benar.
Pertimbangkan Performa: Meskipun decorator sangat kuat, mereka juga dapat memengaruhi performa. Waspadai implikasi performa dari decorator Anda, terutama dalam aplikasi yang kritis terhadap performa.

Contoh Internasionalisasi dengan Decorator

Decorator dapat membantu dalam internasionalisasi (i18n) dan lokalisasi (l10n) dengan mengasosiasikan data dan perilaku spesifik-lokal ke komponen kode:

Contoh: Pemformatan Tanggal yang Dilokalkan

import 'reflect-metadata';

interface DateFormatOptions {
  locale: string;
  options?: Intl.DateTimeFormatOptions;
}

const dateFormatKey = 'dateFormat';

function formatDate(options: DateFormatOptions) {
  return function(target: any, propertyKey: string) {
    Reflect.defineMetadata(dateFormatKey, options, target, propertyKey);
  };
}

class Event {
  @formatDate({ locale: 'fr-FR', options: { year: 'numeric', month: 'long', day: 'numeric' } })
  startDate: Date;

  constructor(startDate: Date) {
    this.startDate = startDate;
  }

  getFormattedStartDate(): string {
    const options: DateFormatOptions = Reflect.getMetadata(dateFormatKey, Object.getPrototypeOf(this), 'startDate');
    return this.startDate.toLocaleDateString(options.locale, options.options);
  }
}

const event = new Event(new Date());
console.log(event.getFormattedStartDate()); // Menghasilkan tanggal dalam format Prancis

Contoh: Pemformatan Mata Uang berdasarkan Lokasi Pengguna

import 'reflect-metadata';

interface CurrencyFormatOptions {
  locale: string;
  currency: string;
}

const currencyFormatKey = 'currencyFormat';

function formatCurrency(options: CurrencyFormatOptions) {
  return function(target: any, propertyKey: string) {
    Reflect.defineMetadata(currencyFormatKey, options, target, propertyKey);
  };
}

class Product {
  @formatCurrency({ locale: 'de-DE', currency: 'EUR' })
  price: number;

  constructor(price: number) {
    this.price = price;
  }

  getFormattedPrice(): string {
    const options: CurrencyFormatOptions = Reflect.getMetadata(currencyFormatKey, Object.getPrototypeOf(this), 'price');
    return this.price.toLocaleString(options.locale, { style: 'currency', currency: options.currency });
  }
}

const product = new Product(99.99);
console.log(product.getFormattedPrice()); // Menghasilkan harga dalam format Euro Jerman

Pertimbangan Masa Depan

Decorator JavaScript adalah fitur yang terus berkembang, dan standarnya masih dalam pengembangan. Beberapa pertimbangan di masa depan meliputi:

Standardisasi: Standar ECMAScript untuk decorator masih dalam proses. Seiring berkembangnya standar, mungkin akan ada perubahan pada sintaksis dan perilaku decorator.
Optimisasi Performa: Seiring decorator menjadi lebih banyak digunakan, akan ada kebutuhan untuk optimisasi performa untuk memastikan bahwa mereka tidak berdampak negatif pada performa aplikasi.
Dukungan Alat: Dukungan alat yang lebih baik untuk decorator, seperti integrasi IDE dan alat debugging, akan memudahkan pengembang untuk menggunakan decorator secara efektif.

Kesimpulan

Decorator JavaScript adalah alat yang ampuh untuk menerapkan pemrograman metadata dan meningkatkan perilaku kode Anda. Dengan menggunakan decorator, Anda dapat menambahkan fungsionalitas dengan cara yang bersih, deklaratif, dan dapat digunakan kembali. Ini mengarah pada kode yang lebih mudah dipelihara, diuji, dan diskalakan. Memahami berbagai jenis decorator dan cara menggunakannya secara efektif sangat penting untuk pengembangan JavaScript modern. Decorator, terutama ketika dikombinasikan dengan API Reflect Metadata, membuka berbagai kemungkinan, mulai dari injeksi dependensi dan validasi hingga serialisasi dan perutean, membuat kode Anda lebih ekspresif dan lebih mudah dikelola.